<template>
  <div>
    <div class="content" v-if="step == 1">
      <el-form autoComplete="on" :model="step1" :rules="registRules1" ref="registForm1">
        <div class="t1">{{$t('regist.t1')}}</div>
        <div class="t2">{{$t('regist.t2')}}</div>
        <div class="regist-form">
          <el-form-item prop="userName">
            <div class="sub-title">{{$t('regist.input1')}}</div>
            <el-input placeholder="enter your account" name="userName" v-model="step1.userName" clearable></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <div class="sub-title">{{$t('regist.input2')}}</div>
            <div class="relative">
              <el-input placeholder="enter your password" name="password" :type="pwdType" v-model="step1.password"></el-input>
              <span class="show-pwd" @click="showPwd"><svg-icon :icon-class="eyeClass" /></span>
            </div>
          </el-form-item>
          <el-form-item prop="url">
            <div class="sub-title">{{$t('regist.input3')}}</div>
            <el-input placeholder="enter your url" name="url"  v-model="step1.url" clearable></el-input>
          </el-form-item>
          <el-button type="primary" v-waves v-loading="loading" class="aip-green-btn" @click.native.prevent="goNext">
            {{$t('regist.t6')}}
          </el-button>
        </div>
      </el-form>
    </div>
    <div class="content" style="padding-bottom: 100px" v-if="step == 2">
      <div class="t1">{{$t('regist.t7')}}</div>
      <div class="t2">{{$t('regist.t8')}}</div>
      <div class="my-email">{{step1.userName}}</div>
      <el-form autoComplete="on" :model="step2" :rules="registRules2" ref="registForm2">
        <div class="regist-form">
          <el-form-item prop="verifyCode">
            <div class="sub-title">{{$t('regist.input5')}}</div>
            <el-input placeholder="enter your verify code"  v-model="step2.verifyCode" clearable></el-input>
          </el-form-item>
          <el-button type="primary" v-waves class="aip-green-btn" v-loading="loading" @click.native.prevent="goRegist">
            {{$t('regist.btn')}}
          </el-button>
          <el-button type="default" v-waves class="aip-green-btn aip-white-btn" @click.native.prevent="goPrev">
            Prev
          </el-button>
          
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getAuthCodeApi, checkNameExists } from '@/api/login'
import { validateAmazonURL, validateEmail } from '@/utils/validate'
import waves from '@/directive/waves' // 水波纹指令

export default {
  name: 'dashboard',
  data() {
    const validateSourceUri = (rule, value, callback) => {
      try {
        if (value) {
          if (validateAmazonURL(value)) {
            callback()
          } else {
            this.$message({
              message: 'please enter correct amazon url',
              type: 'error'
            })
            callback(null)
          }
        } else {
          callback()
        }
      } catch(e){}
    }
    return {
      step: 1,
      loading: false,
      step1: {
        userName: this.$route.query.defaultEmail || '',
        password: '',
        url: ''
      },
      registRules1: {
        userName: [{ required: true, message: 'amazon acount is required', trigger: 'change' }],
        password: [{ required: true, message: 'password is required', trigger: 'change' }],
        url: [{ required: true, message: 'url is required', trigger: 'change' }, {validator: validateSourceUri, trigger: 'blur'}]
      },
      step2: {
        verifyCode: ''
      },
      registRules2: {
        verifyCode: [{ required: true, message: 'verify code is required', trigger: 'change' }]
      },
      pwdType: 'password',
      eyeClass: 'eye',
      isRemember: false
    }
  },
  directives: {
      waves
  },
   methods: {
     showPwd() {
       if (this.pwdType === 'password') {
         this.pwdType = ''
         this.eyeClass = 'open_eye'
       } else {
         this.pwdType = 'password'
         this.eyeClass = 'eye'
       }
     },
     goPrev() {
        this.step = 1
     },
     goNext() {
       this.$refs.registForm1.validate(valid => {
         if (valid) {
          this.loading = true;
          checkNameExists(this.step1.userName).then(() => {
            getAuthCodeApi({userName: this.step1.userName}).then(response => {
              this.$message({
                message: 'The verifying code has been sent to your mailbox',
                type: 'success'
              });
              this.step = 2
              this.loading = false
            }).catch(e => {
              this.loading = false
              this.$message.error('sending error');
            })
          }).catch(e=> {
            this.loading = false
          })
         } else {
          this.loading = false
           console.log('error submit!!')
           return false
         }
       })
     },
     goRegist() {
        this.$refs.registForm2.validate(valid => {
         if (valid) {
           let param = $.extend({}, this.step1, this.step2)
            this.$store.dispatch('Regist', param).then(() => {
              this.loading = false
              this.$router.push({ path: this.$route.query.cbPath ? this.$route.query.cbPath : '/' })
            }).catch(() => {
              this.loading = false
            })
         } else {
           console.log('error submit!!')
           return false
         }
       })
     }
  }
}
</script>

<style  scoped>
  .content {
    width: 100%;
    height: 430px;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2);
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2);
    padding: 32px 29px;
    background: #ffffff;
  }
  .content .t1 {
    font-size: 30px;
    color: #757575;
    padding-bottom: 10px;
  }
  .content .t2 {
    font-size: 14px;
    color: #A1A1A1;
  }
  .regist-form {
    padding-top: 30px;
  }
  .regist-form .sub-title {
    font-size: 12px;
    color: #A1A1A1;
    line-height: 1;
  }
  .el-input {
    margin: 8px 0 0;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 16px;
    color: #333333;
    cursor: pointer;
    user-select:none;
  }
  .aip-green-btn {
    height: 42px;
    line-height: 42px;
    border-radius: 4px;
    float: right;
    margin-top: 20px;
    font-size: 14px;
    margin-left: 15px;
  }
  .my-email {
    font-size: 14px;
    color: #3DBDB6;
    padding: 5px 0;
  }
  .el-form-item {
    margin-bottom: 8px;
  }
</style>
<style type="text/css">
  .regist-box .el-radio__label{
    color: #A1A1A1;
    font-weight: normal;
  }
  .regist-box .el-radio__input.is-checked+.el-radio__label {
    color: #3DBDB6;
  }
  .regist-box .el-radio__input.is-checked .el-radio__inner {
    border-color: #3DBDB6;
    background: #3DBDB6;
  }
  .regist-box .el-form-item__error {
    left: inherit;
    right: 0;
  }
  .regist-box .el-form-item__content {
    margin-top: 8px;
  }
  .regist-box .el-button {
    width: 70px;
    text-align: center;
  }
</style>
